<template>
  <el-form
    ref="formLogin"
    :model="perfertData"
    :rules="registRules"
    class="login-form"
    label-position="right"
    label-width="130px"
    size="large"
  >
    <el-row style="margin-right: -10px; margin-left: -10px">
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <div class="title_content">
            <em class="title_icon"></em>
            <div class="title_text">企业信息</div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="getShow">
        <el-form-item prop="enterpriseName" label="企业名称">
          <el-input
            v-model="perfertData.enterpriseName"
            placeholder="请输入企业名称"
            link
            type="primary"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="getShow">
        <el-form-item prop="creditCode" label="统一社会代码">
          <el-input
            v-model="perfertData.creditCode"
            :placeholder="'请输入统一社会信用代码'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="getShow">
        <el-form-item prop="legalPerson" label="企业法人">
          <el-input
            v-model="perfertData.legalPerson"
            :placeholder="'请输入企业法人'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="getShow">
        <el-form-item prop="registeredCapital" label="注册地址">
          <el-input
            v-model="perfertData.registeredCapital"
            :placeholder="'请输入注册资本'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="!getShow">
        <el-form-item prop="registeredCapital" label="姓名">
          <el-input
            v-model="perfertData.registeredCapital"
            :placeholder="'请输入注册资本'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px" v-show="!getShow">
        <el-form-item prop="registeredCapital" label="身份证号">
          <el-input
            v-model="perfertData.registeredCapital"
            :placeholder="'请输入注册资本'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="registeredAddr" label="联系人">
          <el-input
            v-model="perfertData.registeredAddr"
            :placeholder="'请输入注册地址'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="accountCorporate" label="联系电话">
          <el-input
            v-model="perfertData.accountCorporate"
            :placeholder="'请输入对公账号'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="BankOpening" label="通讯地址">
          <el-input
            v-model="perfertData.BankOpening"
            :placeholder="'请输入开户银行'"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
        <el-form-item>
          <div class="title_content">
            <em class="title_icon"></em>
            <div class="title_text">协议信息</div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="BankOpening" label="特约商户协议">
          <div style="color: #409EFF;cursor: pointer;">杨天药业合作协议</div>
        </el-form-item>
      </el-col>
      <el-col :span="8" style="padding-right: 10px; padding-left: 10px">
        <el-form-item prop="BankOpening" label="我已阅读并同意">
          <el-checkbox-group v-model="perfertData.checkBox">
            <el-checkbox value="Online activities" name="type">
            <a href="http://www.baidu.com" style="color: #409EFF;cursor: pointer;text-decoration: none;">《和平服务协议》 和 《用户隐私协议》</a>
            </el-checkbox>
        </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="6" style="padding-right: 10px; padding-left: 60px">
        <el-form-item>
          <XButton
            :loading="loginLoading"
            :title="'确认'"
            class="w-[100%]"
            type="primary"
            @click="handleLogin"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import type { RouteLocationNormalizedLoaded } from 'vue-router'

import { useFormValid } from './useLogin'
import { useRegisterStores } from '@/store/modules/register'

defineOptions({ name: 'LoginForm' })

// const message = useMessage()
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const { currentRoute, push } = useRouter()
const redirect = ref<string>('')
const loginLoading = ref(false)
const registerStore = useRegisterStores()
const getShow = computed(() => unref(registerStore.getRegisterType) === '1')

const registRules = {
//   enterpriseName: [required],
//   creditCode: [required],
//   legalPerson: [required],
//   registeredCapital: [required],
  registeredAddr: [required],
  accountCorporate: [required],
  BankOpening: [required],
  checkBox: [required]
}
const perfertData = reactive({
    // 企业名称
    enterpriseName: '芋道源码',
    // 统一社会信用代码
    creditCode: '',
    // 企业法人
    legalPerson: '',
    // 注册资本
    registeredCapital: '',
    // 注册地址
    registeredAddr: '',
    // 对公账号
    accountCorporate: '',
    // 开户银行
    BankOpening: '',
    checkBox: [],
    logoImg: '',
    logoImgs: [],
    desc: ''
})

// const loading = ref() // ElLoading.service 返回的实例
// 登录
const handleLogin = async () => {
  // 假数据定向道资料完善页面
    push({ path: '/idRegist' })
    return
  loginLoading.value = true
  try {
    // await getTenantId()
    const data = await validForm()
    if (!data) {
      return
    }
  } finally {
  }
}

watch(
  () => currentRoute.value,
  (route: RouteLocationNormalizedLoaded) => {
    redirect.value = route?.query?.redirect as string
  },
  {
    immediate: true
  }
)
onMounted(() => {
})
</script>

<style lang="scss" scoped>
:deep(.anticon) {
  &:hover {
    color: var(--el-color-primary) !important;
  }
}

.title_content{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: -10%;
    .title_icon{
        width: 4px;
        height: 20px;
        background: #00abfd;
        border-radius: 2px;
    }
    .title_text{
        margin-left: 10px;
    }
}
</style>
